<template>
  <div style="border-bottom: 2px solid #0077ff">
    <div style="background: #0077ff; min-width: 90px;position: relative; padding: 0 15px; height: 35px; width: fit-content; display: flex; align-items: center; justify-content: start; color: white">
      <span>{{fieldConfig.title}}</span>
      <div style="border-right: 20px solid transparent; border-bottom: 37px solid #0077ff;left: 100%; top: 0; position: absolute"></div>
      <div style="width: 15px; height: 33px; margin-top: -2px; transform: skew(30deg);background: #66adff; position: absolute; left: calc(100% + 16px)"></div>
      <div style="width: 15px; height: 33px; margin-top: -2px; transform: skew(30deg);background: #99c9ff; position: absolute; left: calc(100% + 37px)"></div>
      <div style="width: 15px; height: 33px; margin-top: -2px; transform: skew(30deg);background: #cce4ff; position: absolute; left: calc(100% + 59px)"></div>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'Title2',
  props: {
    fieldConfig: createProps(Object, () => ({title: undefined}))
  }
}
</script>